<template>
  <div class="myColorPicker">
    <el-color-picker v-model="localColor" :size="size" :style="styleColor" show-alpha
                     @change="colorChange($event)" @active-change="colorChange($event)"></el-color-picker>
  </div>
</template>
<script>
import baseComp from "./baseComp";

export default {
  extends: baseComp,
  name: "colorSelector",
  model: {
    prop: "localColor",
    event: "change",
  },
  props: {
    params: {
      type: Object,
      default: () => {
      }
    },
    localColor: {
      type: String,
      default: ""
    },
  },
  watch: {
    params: {
      handler(v) {
        if (v) {
          this.initData(v);
        }
      },
      immediate: true,
      deep: true,
    },
    localColor: {
      handler(v) {
        if (v) {
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      size: "mini",
      // localColor: "#963129",
      styleColor: {
        width: '10px',
        height: '10px'
      },
    };
  },
  components: {},
  created() {
  },
  mounted() {
  },
  methods: {
    initData(v) {
      // this.localColor = v.color;
      this.size = v.size;
      if ("path" in v.styleColor) {
        delete v.styleColor["path"]
      }
      if (v.styleColor !== null) {
        this.styleColor = v.styleColor
      }
    },
    colorChange(node) {
      this.$emit("change", node);
    }
  },
};
</script>
<style lang="less" scoped>
//
//.styleColor {
//  height: 100%;
//  width: 100%
//}
.myColorPicker {

  ::v-deep {
    .el-color-picker--mini .el-color-picker__trigger {
      margin-top: 5px;
      height: 25px;
      width: 72.33px;
    }

    .el-color-picker__trigger {
      padding: 1px;
      border: 1px solid #DCDFE6;
      //border-radius: 0px;
    }

    //
    //.el-color-picker__color {
    //  border: 0px;
    //}
    .el-icon-arrow-down:before {
      content: '';
    }

  }

}


</style>


